<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>绘制图片</title>
	<style type="text/css">
		canvas{
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');

var image = new Image();

image.onload = function () {
	// 实现图片绘制
	console.log(image);
	// 绘制图片的三种方式
	
	// 3个参数
	// 图片对象
	// 绘制在画布上的坐标 x,y (相对于canvas定位)
	// ctx.drawImage(image,0,100);

	// 5个参数
	// 图片对象
	// 位置：绘制在画布上的坐标 x,y (相对于canvas定位)
	// 长宽：图片的大小 长和宽
	// ctx.drawImage(image,0,100,500,50);

	// 9个参数
	// 图片对象
	// 图片上定位的坐标 x y
	// 在图片截取多大区域 w h
	// 位置：绘制在画布上的坐标 x,y (相对于canvas定位)
	// 长宽：图片的大小 长和宽
	// 
	ctx.drawImage(image,0,0,1920,800,0,0,300,300);
	
}
image.src = 'image/02.jpg';

</script>
</html>